import React from "react";
import './App.css'
import Home from "./views/home";
import Car from "./views/car";
import My from "./views/my";

class App extends React.Component {
  state = {
    titles: [
      {
        name: "首页",
        element: <Home></Home>
      },
      {
        name: "购物车",
        element: <Car></Car>
      },
      {
        name: "我的",
        element: <My></My>
      },
    ],
    activeIndex: 2
  };
  changeActiveIndex(i) {
    // 修改 state activeIndex
    this.setState({
      activeIndex: i
    })
  }
  render() {
    const { titles, activeIndex } = this.state
    return (
      <div className="App">
        <div className="title">
          {
            titles.map((v, i) => {
              return <span onClick={() => this.changeActiveIndex(i)} key={i} className={ i === activeIndex ? 'active' : ''}>{v.name}</span>
            })
          }
        </div>
        <div>{ titles[activeIndex].element }</div>
      </div>
    );
  }
}

export default App;
